import React, { useState, useEffect, useReducer } from 'react'
import { ScrollView, View, Text, TextInput, Button, StyleSheet, Image, TouchableOpacity, Alert } from 'react-native'
import { connect } from 'react-redux'

import axios from 'axios'//当页面有第二个get/post/put/delete方法时，直接使用axios调用

import stateToProps from '../store/stateToProps'//变量
import dispatchToProps from '../store/dispatchToProps'//方法

const outlist = [
    { id: 1, title: '收入1', money: 30000 },
    { id: 2, title: '收入2', money: 15000 },
]
const add=(outlist)=>{
    let money=0
    for(let i=0;i <outlist.length;i++){
        money=money+outlist[i].money
    }
    return money
}
const Input = (props) => {
    let { inputValue, inputChange, clickBtn, postFun, deleteFun, getFun, putFun,
        list, data, post, } = props
    const [selectTab, setSelectTab] = useState(0)
    /*这里是页面加载完成时调用，会调用get请求，拉取数据*/
    // useEffect(() => {
    //     getFun()
    // })
    return (
        <ScrollView style={{ backgroundColor: '#F7F7F8' }}>
            <Text style={styles.back} onPress={() => { props.navigation.push('Account') }}>Back</Text>
            <Text style={styles.output}>支出列表:</Text>
            <View style={styles.lists}>
                {
                    outlist.map((item, idx) => (
                        <View style={styles.onelist} key={idx}>
                            <Text style={styles.title}>{item.title}</Text>
                            <Text style={styles.money}>￥{item.money}</Text>
                        </View>
                    ))
                }

            </View>
            <Text style={styles.account}>合计：{add(outlist)}</Text>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    account:{
        paddingLeft:ptd(20)
    },
    title:{
        paddingLeft:ptd(10)
    },
    money:{
        position:'absolute',
        paddingLeft:ptd(260)
    },
    onelist: {
        justifyContent:'center',
        width: '100%',
        height: 50,
        borderWidth:1,
        borderColor:'#ccc',
        marginBottom:2
    },
    lists: {
        marginTop: ptd(20),
        width: ptd(335),
        marginLeft: ptd(20),
    },
    output: {
        paddingLeft: ptd(20),
        paddingTop: ptd(10),
        fontSize: 15
    },
    back: {
        paddingLeft: ptd(20),
        paddingTop: ptd(10),
        fontSize: 20
    }

});
//每个自己写的组件（页面）都要用下面这一行
export default connect(stateToProps, dispatchToProps)(Input);
